﻿@{
    ViewData["Title"] = "MemberEdit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<form class="layui-form" action="">
    <h2>基本信息设置</h2>
    <div class="layui-form-item" style="display:none">
        <div class="layui-inline">
            <label class="layui-form-label">会员卡Id</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" id="memberCardId" />
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">品牌名</label>
            <div class="layui-input-block">
                <input maxlength="16" placeholder="不能超过16个字" class="layui-input" type="text" id="memberCardName" />
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">会员卡logo</label>
        <div class="layui-inline">

            <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                <i class="layui-icon layui-icon-upload"></i> 重新上传
            </button>
            <div style="width: 132px;">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                    <div id="ID-upload-demo-text"></div>
                </div>
                <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">会员卡主题颜色</label>
        <div class="layui-input-inline" style="width: 120px;">
            <input type="text" name="color" value="" placeholder="请选择颜色" class="layui-input" id="ID-colorpicker-demo-form-color">
        </div>
        <div class="layui-inline" style="left: -11px;">
            <div id="ID-colorpicker-demo-form"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">会员卡号</label>
            <div class="layui-input-inline">
                @*   单选框 *@
                <input type="radio" name="memberCardGenerateType" value="1" title="系统自定义生成" id="memberCardGenerateType1">
                <input type="radio" name="memberCardGenerateType" value="2" title="手机号作为卡号" id="memberCardGenerateType2">
                <input type="radio" name="memberCardGenerateType" value="3" title="自定义会员卡号" id="memberCardGenerateType3">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">有效期</label>
            <div class="layui-input-inline">
                @*   单选框 *@
                <input type="radio" name="expirationDate" value="1" title="永久有效" id="expirationDate1">
                <input type="radio" name="expirationDate" value="2" title="指定日期" id="expirationDate2">
                <input type="radio" name="expirationDate" value="3" title="固定长度" id="expirationDate3">
            </div>
        </div>
    </div>
    <h2>会员卡详情</h2>
    <div class="layui-form-item">
        <label class="layui-form-label">特权说明</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea" id="description"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">使用须知</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea" id="instructions"></textarea>
        </div>
    </div>
    <h2>激活设置</h2>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">激活条件</label>
            <div class="layui-input-inline">
                @*   单选框 *@
                <input type="radio" name="activationConditions" value="1" title="普通激活" id="activationConditions1">
                <input type="radio" name="activationConditions" value="2" title="付费激活" id="activationConditions2">
                <input type="radio" name="activationConditions" value="3" title="条件激活" id="activationConditions3">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">会员资料</label>
        <div class="layui-input-block">
            <table class="layui-table" id="demoTable" lay-filter="demoTable">
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <h2>功能设置</h2>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">功能操作提示</label>
            <div class="layui-input-block">
                <input maxlength="16" placeholder="不能超过16个字" class="layui-input" type="text" id="promptAction" />
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
    layui.use(function () {
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var util = layui.util;
        var table = layui.table;
        var upload = layui.upload;

        var colorpicker = layui.colorpicker;
        var $ = layui.$;


        // 单图片上传
        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url: 'http://localhost:5174/api/RoomType/Upload', // 实际使用时改成您自己的上传接口即可。
            before: function (obj) {
                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#ID-upload-demo-img').attr('src', 'http://localhost:5174' + result); // 图片链接（base64）
                });

                element.progress('filter-demo', '0%'); // 进度条复位
                layer.msg('上传中', { icon: 16, time: 0 });
            },
            done: function (res) {
                // 若上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                // 上传成功的一些操作
                // …
                $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
            },
            error: function () {
                // 演示失败状态，并实现重传
                var demoText = $('#ID-upload-demo-text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            },
            // 进度条
            progress: function (n, elem, e) {
                element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', { icon: 1 });
                }
            }
        });


        // 渲染
        colorpicker.render({
            elem: '#ID-colorpicker-demo-form',
            color: '#1c97f5',
            done: function (color) {
                $('#ID-colorpicker-demo-form-color').val(color);
            }
        });
        // // 自定义验证规则
        // form.verify({
        //     pass: function (value) {
        //         if (!/(.+){6,12}$/.test(value)) {
        //             return '密码必须 6 到 12 位';
        //         }
        //     }
        // });

        // 提交事件
        form.on('submit(demo1)', function (data) {
            console.log(data.field);
            $.ajax({
                url: 'http://localhost:5174/api/Labels/GetLabelManual',
                type: 'post',
                contentType: 'application/json',
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('token')
                },
                data: JSON.stringify(data.field),
                async: true,
                success: function (data) {
                    console.log(data);
                    if (data.code == 200) {
                        layer.msg('修改成功', { icon: 1 });
                    } else {
                        layer.msg('修改失败', { icon: 2 });
                    }
                },
                error: function (xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        });

        // 日期
        laydate.render({
            elem: '#date'
        });
        show()
        //会员资料显示
        function show() {
            $.ajax({
                url: 'http://localhost:5174/api/Clients/GetByWhereClient',
                type: 'post',
                contentType: "application/json",
                //data: JSON.stringify({ labelName: labelName }),
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('token')
                },
                async: true,
                success: function (res) {
                    table.render({
                        elem: '#demoTable',
                        data: res.data,
                        cols: [[
                            { field: 'memberInfoName', title: '信息名称' },
                            {
                                field: 'menberInfoState', title: '启用', templet: function (d) {
                                    if (d.menberInfoState == true) {
                                        return '<input type="checkbox" name="menberInfoState" value="' + d.menberInfoId + '" lay-skin="switch" lay-text="启用|禁用" checked>';
                                    } else {
                                        return '<input type="checkbox" name="menberInfoState" value="' + d.menberInfoId + '" lay-skin="switch" lay-text="启用|禁用">';
                                    }
                                }
                            },
                            {
                                field: 'menberInfoModifted', title: '可修改', templet: function (d) {
                                    if (d.menberInfoModifted == true) {
                                        return '<input type="checkbox" name="menberInfoModifted" value="' + d.menberInfoId + '" lay-skin="switch" lay-text="可修改|不可修改" checked>';
                                    } else {
                                        return '<input type="checkbox" name="menberInfoModifted" value="' + d.menberInfoId + '" lay-skin="switch" lay-text="可修改|不可修改">';
                                    }
                                }
                            },
                            // { toolbar: '#bardemo', title: '操作' }
                        ]],
                        // page: false
                    });
                },
                error: function (error) {
                    console.error(error);
                }
            });
        }

        GetMemberCard();
        function GetMemberCard() {
            $.ajax({
                url: 'http://localhost:5174/api/MemberCard/GetMemberCard',
                type: 'get',
                contentType: 'application/json',
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('token')
                },
                async: true,
                success: function (data) {
                    console.log(data.data);
                    document.getElementById("memberCardId").value = data.data.memberCardId;
                    document.getElementById("memberCardName").value = data.data.memberCardName;
                    document.getElementById("ID-upload-demo-img").src = data.data.memberCardLogo;
                    document.getElementById("ID-colorpicker-demo-form-color").value = data.data.memberCardColor;
                    //单选框反填  会员卡号
                    data.data.memberCardGenerateType == 1 ? document.getElementById("memberCardGenerateType1").checked = true : data.data.memberCardGenerateType == 2 ? document.getElementById("memberCardGenerateType2").checked = true : document.getElementById("memberCardGenerateType3").checked = true;
                    //单选框反填  有效期
                    data.data.expirationDate == 1 ? document.getElementById("expirationDate1").checked = true : data.data.expirationDate == 2 ? document.getElementById("expirationDate2").checked = true : document.getElementById("expirationDate3").checked = true;
                    document.getElementById("description").innerHTML = data.data.description;
                    document.getElementById("promptAction").value = data.data.promptAction;
                    data.data.activationConditions == 1 ? document.getElementById("activationConditions1").checked = true : data.data.activationConditions == 2 ? document.getElementById("activationConditions2").checked = true : document.getElementById("activationConditions3").checked = true;
                    // form.render();
                    document.getElementById("instructions").innerHTML = data.data.instructions;
                },
                error: function (xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        }


    });



    form.on('submit(demo1)', function (data) {
        console.log(data.field);
        $.ajax({
            url: 'http://localhost:5174/api/MemberCard/UpdateRangeVIPCardInfo',
            type: 'post',
            contentType: 'application/json',
            headers: {
                "Authorization": "Bearer " + localStorage.getItem('token')
            },
            data: JSON.stringify({
                "memberCardId": document.getElementById("memberCardId").value,
                "memberCardName": document.getElementById("memberCardName").value,
                "memberCardLogo": uploadInst,
                "memberCardTitle": document.getElementById("memberCardTitle").value,
                "memberCardColor": $('#ID-colorpicker-demo-form-color').val(),
                "customBackgroundColor": "",
                "memberCardState": true,
                "memberCardGenerateType": {},
                "expirationDate": {},
                "description": "",
                "instructions": "",
                "activationConditions": {},
                "toUpAmount": 0,
                "amountPaid": 0,
                "promptAction": "",
                "infoOutput": [
                    {
                        "memberInfoId": 0,
                        "menberInfoState": true,
                        "menberInfoModifted": true
                    }
                ]

            }),

            async: true,
            // console.log(data)
            // success: function (data) {
            //     console.log(data);
            //     if (data.code == 200) {
            //         layer.msg('修改成功', { icon: 1 });
            //     } else {
            //         layer.msg('修改失败', { icon: 2 });
            //     }
            // },
            // error: function (xhr, status, error) {
            //     console.log(xhr.responseText);
            // }
        });
    });






</script>


